<template>
	<view>
		<!-- 顶部部分 -->
		<!-- <view class="top_box"> -->
		<!-- <view class="top_box">
			<view class="top_box2">
				<image src="../../static/left_back.png" class="left_back" mode="aspectFill"></image>
				<view class="top_tex">查看认购</view>
				<image src="../../static/headset.png" class="headset" mode="aspectFill"></image>
			</view>
		</view> -->
			<view class="car">
				<view class="name_car">
					<!-- <view class="logo">港</view> --> 
					<logo pattern="1" :text="$t(info.location)" class="logo"></logo>
					<view class="car_text">
						<!-- <view class="car_text1">{{$t('company.xiaomi-tech')}}</view> -->
						<view class="car_text1">{{$getLocaleField(info, 'company_name')}}</view>
						<view class="car_text2">{{info.symbol}}.{{info.location}}</view>
					</view>
				</view>
				<view class="detil" v-if="cash_type == 'cash'">
					<view class="first_box">
						<view class="idera">{{$t('check_subscripti.subs-method')}}</view>
						<view class="right_idera">{{$t('check_subscripti.cash')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-qty')}}</view>
						<view class="right_idera">{{number.toLocaleString()}}{{$t('shares')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-amt')}}</view>
						<view class="right_idera">{{money.toLocaleString()}} HKD</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.frozen-funds')}}</view>
						<view class="right_idera">{{frozen.toLocaleString()}} HKD</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-fees')}}</view>
						<view class="right_idera">{{rg_sxf.toLocaleString()}} HKD</view>
					</view>
					<view v-if="order.order_status == 3" class="two_box">
						<view class="idera">{{$t('资金不足')}}</view>
						<view class="right_idera">{{$t('check_subscripti.Insufficient-msg')}}{{order.err_msg}}</view>
					</view>
					<block v-if="order.status == -1">
						<view class="two_box">
							<view class="idera">{{$t('Failed-datetime')}}</view>
							<view class="right_idera">{{$timeToStr(order.canceled_time)}}</view>
						</view>
						<view class="two_box">
							<view class="idera">{{$t('Failed-reasons')}}</view>
							<view class="right_idera">{{$t('用户取消')}}</view>
						</view>
					</block>
					<block v-if="order.status == -2">
						<view class="two_box">
							<view class="idera">{{$t('Failed-datetime')}}</view>
							<view class="right_idera">{{$timeToStr(order.canceled_time)}}</view>
						</view>
						<view class="two_box">
							<view class="idera">{{$t('Failed-reasons')}}</view>
							<view class="right_idera">{{$t('系统取消')}}</view>
						</view>
					</block>
					<view class="total_box">
						<view class="total">{{$t('total')}}</view>
						<view class="right_total">{{total.toLocaleString()}} HKD</view>
					</view>
				</view>
				<view class="detil" v-else-if="cash_type == 'financing'">
					<view class="first_box">
						<view class="idera">{{$t('check_subscripti.subs-method')}}</view>
						<view class="right_idera">{{$t('check_subscripti.financing')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-qty')}}</view>
						<view class="right_idera">{{parseFloat(number).toLocaleString()}}{{$t('shares')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-amt')}}</view>
						<view class="right_idera">{{parseFloat(money).toLocaleString()}} HKD</view>
					</view>
					<!-- <view class="two_box">
						<view class="idera">{{$t('check_subscripti.frozen-funds')}}</view>
						<view class="right_idera">{{frozen.toLocaleString()}} HKD</view>
					</view> -->
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.financing-amt')}}</view>
						<view class="right_idera">{{parseFloat(rz_money).toLocaleString()}} HKD</view>
					</view>
					<!-- <view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-fees')}}</view>
						<view class="right_idera">{{rg_sxf.toLocaleString()}} HKD</view>
					</view> -->
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.yzybzj')}}</view>
						<view class="right_idera">{{(parseFloat(rz_money) * info.margin_rate).toLocaleString()}} {{info.currency}}</view>
					</view>
					<!-- <view class="two_box">
						<view class="idera">{{$t('check_subscripti.ss_yjsf')}}</view>
						<view class="right_idera">{{parseFloat(ss_yjsf).toLocaleString()}} {{info.currency}}</view>
					</view> -->
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.financing-rate')}}</view>
						<view class="right_idera">{{rz_llv}}%</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.frozen_day')}}</view>
						<view class="right_idera">{{frozen_day}}{{$t(`day`)}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-fees')}}</view>
						<view class="right_idera">{{parseFloat(rg_sxf).toLocaleString()}} {{info.ipo_fee_currency}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.financing-fees')}}</view>
						<view class="right_idera">{{yj_rzf.toLocaleString()}} HKD</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.Submitted-Date')}}</view>
						<view class="right_idera">{{$timeToStr(order.add_time)}}</view>
					</view>
					<view v-if="order.update_time" class="two_box">
						<view class="idera">{{$t('check_subscripti.Modified-Date')}}</view>
						<view class="right_idera">{{$timeToStr(order.update_time)}}</view>
					</view>
 					<!-- <view v-if="order.canceled_time" class="two_box">
						<view class="idera">{{$t('check_subscripti.Canceled-Date')}}</view>
						<view class="right_idera">{{$timeToStr(order.canceled_time)}}</view>
					</view> -->
					<view v-if="order.order_status == 3" class="two_box">
						<view class="idera">{{$t('资金不足')}}</view>
						<view class="right_idera">{{$t('check_subscripti.Insufficient-msg')}}{{order.err_msg}}</view>
					</view>
					<block v-if="order.status == -1">
						<view class="two_box">
							<view class="idera">{{$t('Failed-datetime')}}</view>
							<view class="right_idera">{{$timeToStr(order.canceled_time)}}</view>
						</view>
						<view class="two_box">
							<view class="idera">{{$t('Failed-reasons')}}</view>
							<view class="right_idera">{{$t('用户取消')}}</view>
						</view>
					</block>
					<block v-if="order.status == -2">
						<view class="two_box">
							<view class="idera">{{$t('Failed-datetime')}}</view>
							<view class="right_idera">{{$timeToStr(order.canceled_time)}}</view>
						</view>
						<view class="two_box">
							<view class="idera">{{$t('Failed-reasons')}}</view>
							<view class="right_idera">{{$t('系统取消')}}</view>
						</view>
					</block>
					<view class="total_box">
						<view class="total">{{$t('total')}}</view>
						<view class="right_total">{{total.toLocaleString()}} HKD</view>
					</view>
				</view>
			</view>
			<!-- <view class="agree_box" @click="agree()">
				<view class="tick_box">
					<image src="../../static/tick.png" class="tick" v-if="ifagree==true"></image>
				</view>
				<view>
					<text class="ageer_text1">{{$t('check_subscripti.agreed')}}</text>
					<text @tap.stop="toAgreedPdf" class="ageer_text2">{{$t('check_subscripti.agreed-name')}}</text>
				</view>
			</view>
			<view class="last_box">
				<view class="last_text1">{{$t('check_subscripti.reminder')}}</view>
				<view class="last_text2">{{$t('check_subscripti.reminder-text1')}}</view>
				<view class="last_text2">{{$t('check_subscripti.reminder-text2')}}</view>
			</view> -->
		<!-- </view> -->
		<!-- <view class="but">
			<wzh-btn pattern="2" :text="$t('cancel')" @invokeBtn="navBack()"></wzh-btn>
			<wzh-btn pattern="1" :text="$t('submit')" @invokeBtn="invokeBtn()"></wzh-btn>
		</view> -->
		<view style="margin-top: 50rpx;">
			<wzh-btn pattern="5"
			  :text="$t('Return')"
			  @invokeBtn="navBack()"></wzh-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: 0,
				id: 0,
				ifagree: true,
				cash_type: "financing",
				
				ky_money: 2000,
				money: 0,
				number: 0,
				frozen: 0,
				frozen_day: 0,
				rz_money: 0, //融资金额
				rg_sxf: 0, //认购手续费
				rz_llv: 0, //融资利率
				yj_rzf: 0, //预融资费
				ss_yjsf: 0, //上市佣金税费
				total: 0, //合计
				
				info: {},
				order: {}
			}
		},
		onLoad(opt){
			this.order_id = opt.order_id
			this.$appLogin(()=>{
				this.getInfo()
			})
		},
		methods: {
			agree(){
				this.ifagree = !this.ifagree
			},
			invokeBtn () {
				if (!this.ifagree) return
				
			},
			toAgreedPdf(){
				location.href = "/hk_eipo/static/Hong_Kong_IPO.pdf"
			},
			navBack(){
				this.$navBack()
			},
			getInfo(){
				this.$httpGet({
					// url:'test/order_info',
					url:'ipos/order_info',
					data:{
						order_id:this.order_id
					}
				}).then((res)=>{
					this.info = res.data.gp_info
					this.order = res.data.info
					
					this.cash_type = this.order.cash_type
					this.money = parseFloat(this.order.money)
					this.number = parseInt(this.order.number)
					this.id = this.info.id
					this.frozen = parseFloat(this.order.frozen)
					this.rg_sxf = parseFloat(this.order.rg_sxf)
					this.rz_money = parseFloat(this.order.rz_money)
					this.rz_llv = parseFloat(this.order.rz_llv)
					this.yj_rzf = parseFloat(this.order.yj_rzf)
					this.frozen_day = parseFloat(this.order.frozen_day) || 0
					this.ss_yjsf = parseFloat(this.order.ss_yjsf)
					this.total = parseFloat(this.order.total)
					
				})
			},
			DateDiff(end){
				var today = new Date();
				var end = new Date(end);
				
				// today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
				// end = new Date(end.getFullYear(), end.getMonth(), end.getDate());
				
				if(end > today){
					var days = parseInt(Math.abs(end - today) / 1000 / 60 / 60 / 24);
				}else{
					var days = parseInt(Math.abs(end - today) / 1000 / 60 / 60 / 24); // 如果不限制对⽐时间和当前时间⼤⼩可以不⽤if
				}
				return days;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(244, 245, 247);
	}

	.top_box {
		height: 90rpx;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
	}

	.top_box2 {
		width: 704rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left_back {
		line-height: 90rpx;
		width: 20rpx;
		height: 30rpx;
	}

	.top_tex {
		color: $font-color-two;
		font-size: 30rpx;
		line-height: 90rpx;
	}

	.headset {
		width: 45rpx;
		height: 40rpx;
	}

	.car {
		// width: 715rpx;
		/* height: 722rpx; */
		padding-bottom: 24rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 24rpx;
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
		/* border: #007AFF 1rpx solid; */
	}

	.name_car {
		height: 120rpx;
		// width: 650rpx;
		margin: auto 33rpx;
		position: relative;
		display: flex;

		border-bottom: rgb(244, 245, 247) 1rpx solid;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 207, 207);
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		top: 30rpx;
		color: rgb(252, 77, 77);
	}

	.car_text {
		position: absolute;
		left: 78rpx;
		top: 30rpx;
	}

	.car_text1 {
		font-size: 28rpx;
		font-weight: bold;

	}

	.car_text2 {
		// font-size: 15rpx;
		color: rgb(153, 153, 153);
		height: 20rpx;
		font-size: 40rpx;
		transform: scale(0.5);
		transform-origin: left top;
	}

	.detil {
		// width: 650rpx;
		margin: auto 33rpx;
	}

	.first_box {
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.two_box {
		margin-top: 42rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.two_box:nth-last-child(2) {
		border-bottom: rgb(244, 245, 247) 1rpx solid;
		padding-bottom: 32rpx;
	}

	.total_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 24rpx;
	}

	.idera {
		font-size: 25rpx;
		color: $font-color-one;
	}

	.right_idera {
		font-size: 25rpx;
		color: $font-color-two;
	}

	.total {
		font-size: 26rpx;
		font-weight: bold;
	}

	.right_total {
		font-size: 24rpx;
		color: $logo-font-color;
		font-weight: bold;
	}

	.agree_box {
		// height: 80rpx;
		line-height: 1;
		// width: 715rpx;
		margin: auto;
		border-radius: 20rpx;
		position: relative;
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
		background-color: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.tick_box {
		width: 27rpx;
		height: 27rpx;
		margin: 26rpx 30rpx;
		// position: absolute;
		border: $font-color-one 2rpx solid;
		// left: 30rpx;
		// top: 26rpx;
		position: relative;
		flex-shrink: 0;

	}

	.tick {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		/* line-height: 50rpx; */
		// text-align: center;
	}

	.ageer_text1 {
		font-size: 25rpx;
		color: $font-color-two;
		vertical-align: middle;
	}

	.ageer_text2 {
		font-size: 25rpx;
		padding-left: 10rpx;
		color: $logo-font-color;
		vertical-align: middle;
	}

	.last_box {
		// height: 216rpx;
		// width: 715rpx;
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
		background-color: #FFFFFF;
		margin: auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		
	}

	.last_text1 {
		font-size: 26rpx;
		color: rgb(122, 122, 122);
		padding-left: 30rpx;
		padding-top: 25rpx;
	}

	.last_text2 {
		font-size: 22rpx;
		color: $font-color-one;
		padding-left: 30rpx;
		padding-top: 5rpx;
		padding-right: 40rpx;
		letter-spacing:2rpx;  
	}
	.but{
		width: 100%;
		padding-top: 100rpx;
		padding-bottom: 55rpx;
		/* margin-top: 200rpx; */
		display: flex;
		margin: auto;
		justify-content: space-around;
		align-items: center;
	}
</style>
